<template>
  <div class="layout">
    <Layout>
      <Sider hide-trigger :style="{background: '#fff'}">
        <Tree :data="data6" @on-select-change="changeDepartment" @click="" style="margin: 20px" ref="tree">
        </Tree>
      </Sider>
      <Layout :style="{padding: '0 24px 0px'}">
        <Content :style="{padding: '20px', minHeight: '650px', background: '#fff'}">
          <header>
            <span>员工名称：</span><Input v-model="query.employeeName" placeholder="请输入名称" style="width: 300px"/>
            <span style="margin-left:10px">状态：</span>
            <Select v-model="query.status" style="width:200px">
              <Option v-for="item in states" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button type="primary" icon="md-search" @click="queryList" class="query">查询</Button>
            <Button @click="reset" class="reset">重置</Button>
            <add-dialog/>
          </header>
          <Table type="seleted" border :columns="columns12" :data="data7" style="margin-top: 20px">
            <template slot-scope="{ row, index }" slot="action">
<!--                  <edit-dialog class="edit"/>-->
              <Button icon="md-build" type="success" @click="editItem(index)" size="small">编辑</Button>
              <Dropdown style="margin-left: 20px">
                <Button type="primary" size="small">
                  更多
                  <Icon type="ios-arrow-down"></Icon>
                </Button>
                <DropdownMenu slot="list">
                  <DropdownItem>停用</DropdownItem>
                  <DropdownItem>重置密码</DropdownItem>
                  <DropdownItem>禁止登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </template>
          </Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <Page :total="100" :current="query.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
            </div>
          </div>
        </Content>
      </Layout>
    </Layout>
    <Modal
      v-model="modal1"
      title="编辑"
      :styles="{top: '20px'}">
      <Form :model="formItem" :label-width="80">
        <FormItem label="姓名">
          <Input v-model="formItem.name" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="账号">
          <Input v-model="formItem.account" placeholder="Enter something..." readonly></Input>
        </FormItem>
        <FormItem label="密码">
          <Input v-model="formItem.pwd" type="password" placeholder="默认密码123456"></Input>
        </FormItem>
        <FormItem label="身份证">
          <Input v-model="formItem.idCard" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="性别">
          <RadioGroup v-model="formItem.sex">
            <Radio label="1">男</Radio>
            <Radio label="0">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="电话">
          <Input v-model="formItem.phone" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="邮箱">
          <Input v-model="formItem.email" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="生日">
          <DatePicker placeholder="Select time" v-model="formItem.birth"></DatePicker>
        </FormItem>
        <FormItem label="用户状态">
          <RadioGroup v-model="formItem.status">
            <Radio label="1">正常</Radio>
            <Radio label="0">停用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="职位">
          <Select v-model="formItem.uroleId">
            <Option v-for="(role,i) in roles" :value="role.uroleId" :key="i">{{role.uroleName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="所属部门">
          <Select v-model="formItem.corganId">
            <Option v-for="(organization,i) in organizations" :value="organization.corganId" :key="i">{{organization.corganName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="submit" type="primary">更新</Button>
        <Button @click="resetForm" type="primary">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script src="./motorcade-personnel-management.js">

</script>

<style scoped src="./motorcade-personnel-management.css">

</style>
